﻿@{
    Layout = "_ContextLayout";
    ViewData["Title"] = "导航管理";
}

@section header{
    <link href="~/lib/nestable/nestable.css" rel="stylesheet" />
    <link href="~/css/pagemng/navigation.css" rel="stylesheet" />
}
<section class="content-header">
    <h1>
        导航管理
        <small>Navigation</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 页面管理</a></li>
        <li class="active">导航管理</li>
    </ol>
</section>

<section class="content">
    <div class="box">
        <!-- 条件 -->
        <div class="box-header">
            <div class="alert alert-info alert-dismissible">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                <h4><i class="icon fa fa-smile-o"></i> 温馨提示：长按可拖动排序</h4>
            </div>
            <button class="btn btn-primary" onclick="navigation_Add('root',0)">新增一级导航</button> 
        </div>
        <!-- /.box-header -->
        <div class="box-body">
            <div class="dd" id="nestable">
                <ol class="dd-list" id="nestable-ol">
                    @*<li class="dd-item" data-id="2">
                            <div class="dd-handle">
                                Item 2
                                <div class="pull-right action-buttons">
                                    <a class="text-primary" title="编辑" href="" onclick="text()">
                                        <i class="fa fa-edit fa-lg"></i>
                                    </a>

                                    <a class="text-red" title="删除" href="" onclick="">
                                        <i class="fa fa-trash fa-lg"></i>
                                    </a>
                                </div>
                            </div>

                            <ol class="dd-list">
                                <li class="dd-item" data-id="3"><div class="dd-handle">Item 3</div></li>
                                <li class="dd-item" data-id="4"><div class="dd-handle">Item 4</div></li>
                                <li class="dd-item" data-id="5"><div class="dd-handle">Item 5</div></li>
                                <li class="dd-item" data-id="9"><div class="dd-handle">Item 6</div></li>
                                <li class="dd-item" data-id="10"><div class="dd-handle">Item 7</div></li>
                            </ol>
                        </li>*@
                </ol>
            </div>
        </div>
        <div class="box-footer">
            <button class="btn btn-info pull-left" style="display:none" id="btn-savesort">保存排序</button>
        </div>
        <!-- /.box-body -->
    </div>
    <!-- /.box -->
</section>

<div class="modal fade" id="navigation-dialog">
    <div class="modal-dialog">
        <div class="box box-success">
            <div class="box-header with-border">
                <h3 class="box-title">新增导航</h3>
                <input type="text" style="display:none" id="nav-parentid" value="0" />
            </div>
            <!-- /.box-header -->
            <!-- form start -->
            <div class="form-horizontal">
                <div class="box-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">ID：</label>
                        <div class="col-sm-8">
                            <input type="text" value="0" class="form-control" id="nav-id" readonly="readonly">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">名称：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="nav-name" maxlength="6" placeholder="长度不易超过6个字符" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Url：</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" id="nav-url" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">跳转方式：</label>
                        <div class="col-sm-8">
                            <select class="form-control select2" id="nav-target">
                                <option value="0">新窗口打开</option>
                                <option value="1" selected="selected">当前窗口打开</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">状态：</label>
                        <div class="col-sm-8">
                            <select class="form-control select2" id="nav-disable">
                                <option value="0">启用</option>
                                <option value="1" selected="selected">禁用</option>
                            </select>
                        </div>
                    </div>
                    <!-- /.box-body -->
                    <div class="box-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit" class="btn btn-info pull-right" id="btn-save" onclick="save()">保存</button>
                    </div>
                    <!-- /.box-footer -->
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>

@section Scripts{

    <script src="~/lib/nestable/jquery.nestable.js"></script>
    <script src="~/js/pagemng/navigation.js"></script>
    <script>
        $('#nestable').nestable({
            group: 0,
            maxDepth: 2,

        }).on('change', function () {
            $("#btn-savesort").css('display', 'block');
        });  
    </script>
}